let footerEl = document.querySelector('.footerNav');
let navList = footerEl.querySelectorAll('li');
let imgList = footerEl.querySelectorAll('img');
let actived = footerEl.querySelector('.footeractive')
let i = 0;
navList.forEach((item)=>{
    item.dataset.id = i;
    i++;
})

let isClick = false;
// 设置点击事件
footerEl.onclick = function(e){
    let targetEl = e.target;
    if(targetEl.closest('.home')){
        location.href = './home.html'
        let className = targetEl.closest('.home').className;
        let imgUrl = "../../img/icon/xiami.png"
        if(actived.dataset.id != targetEl.closest('.home').dataset.id){
            footerChange(targetEl,className,imgUrl);
        }
    }
    if(targetEl.closest('.classify')){
        location.href = './justify.html'
        let className = targetEl.closest('.classify').className;
        let imgUrl = "../../img/icon/sort01.png"
        if(actived.dataset.id != targetEl.closest('.classify').dataset.id){
            footerChange(targetEl,className,imgUrl);
        }
    }
    if(targetEl.closest('.shoppingCart')){
        location.href = '../LJP/shopping_car.html'
        let className = targetEl.closest('.shoppingCart').className;
        let imgUrl = "../../img/icon/cart_fill.png" 
        if(actived.dataset.id != targetEl.closest('.shoppingCart').dataset.id){
            footerChange(targetEl,className,imgUrl);
        }
    }
    if(targetEl.closest('.my')){
        location.href = '../LXW/personal.html'
        let className = targetEl.closest('.my').className;
        let imgUrl = "../../img/icon/emoji_flash_fill.png"
        if(actived.dataset.id != targetEl.closest('.my').dataset.id){
            footerChange(targetEl,className,imgUrl);
        }
    }
}

function footerChange(targetEl,className,imgUrl){
    imgList[0].src = "../../img/icon/home.png";
    imgList[1].src = "../../img/icon/sort.png";
    imgList[2].src = "../../img/icon/cart.png"
    imgList[3].src = "../../img/icon/people.png"
    navList[actived.dataset.id].classList.remove('footeractive');
    let parentEl = targetEl.closest(`.${className}`);
    parentEl.classList.add('footeractive');
    let imgEl = parentEl.querySelector('img');
    imgEl.src = imgUrl;
    isClick = true;
    actived.dataset.id = parentEl.dataset.id;
}